<template>
	<div class="login abs left0 right0 bottom0 top0" :style="bg">
		<div class="login-warp">
			<img class="login-logo" src="@/assets/imgs/b2.png" alt="" />

			<div class="login-box">
				<p class="login-title">
					逸路安基础数据平台
					<br />
					登录系统
				</p>

				<el-form ref="form" label-position="top" :model="form">
					<el-form-item prop="name" :rules="required">
						<el-input placeholder="请输入登录账号" class="big-input" autofocus v-model.trim="form.name" @keydown.enter.native="submitForm" maxlength="15">
							<div slot="prefix"><img class="pl20 pr20" src="@/assets/imgs/icon1.png" alt /></div>
						</el-input>
					</el-form-item>
					<el-form-item prop="password" :rules="required">
						<el-input
							placeholder="请输入登录密码,最少6位"
							class="big-input"
							@keydown.enter.native="submitForm"
							type="password"
							v-model="form.password"
							:maxlength="20"
							:minlength="6"
						>
							<div slot="prefix"><img class="pl20 pr20" src="@/assets/imgs/icon2.png" alt /></div>
						</el-input>
					</el-form-item>
					<el-form-item class="text-center"><el-button class="login-submit" :loading="loading" @click="submitForm">登录</el-button></el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import { login } from '@/api';

export default {
	data() {
		return {
			required: {
				required: true,
				message: '请输入',
				trigger: 'blur'
			},
			// 模拟测试数据
			form: {
				name: '出租车',
				password: '123456'
			},
			// 登录按钮
			loading: false,
			bg: {
				backgroundImage: `url(${require('@/assets/imgs/b3.png')})`
			}
		};
	},
	created() {
		if (localStorage.token) {
			this.$router.push('/home');
			// this.getUserDataFn()
		} else {
			this.$router.push('/');
		}
	},
	methods: {
		submitForm() {
			// TODO 下一行打开
			//localStorage.token = 123456789
			this.$router.push('/home');
			this.$refs.form.validate(valid => {
				if (!valid) return 0;
				if (this.loading) return 0;
				this.loginFn();
			});
		},
        loginFn() {
            this.loading = true;
            login({
                loginId: this.form.name,
                loginPwd: this.form.password,
            }).then(res => {
                if (res.code === 200) {
                    this.$store.state.user = {
                        userName: this.form.name,
                        nickName: this.form.name,
                        captcha: this.form.name
                    }
                    localStorage.token = res.data.token;
                    //将token设置到请求头中
                    this.$router.push('/home');
                } else {
                    this.$message.warning(res.msg);
                }
            }).finally(() => {
                this.loading = false;
            });
        },
		getUserDataFn() {
			// getUserData().then(res => {
			//   localStorage.token = res.data.token
			//   localStorage.userType = res.data.userTypeEnum.name
			//   this.$store.commit('changeNickName', res.data.loginName)
			//   this.$router.push('/main')
			// })
		}
	}
};
</script>

<style scoped>
.login {
	background-color: #409eff;
	min-width: 1200px;
	background-repeat: no-repeat;
	background-size: cover;
}

.login-warp {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 486px;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 0 30px 2px #1c4baa;
}

.login-logo {
	width: 348px;
	height: 282px;
	position: absolute;
	left: 70px;
	top: 102px;
}

.login-box {
	position: absolute;
	right: 50px;
	width: 300px;
}

.login-title {
	color: #000;
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 38px;
	margin-top: 29px;
}

.login-submit {
	margin-top: 30px;
	background-color: #00a0ea;
	width: 213px;
	border-radius: 22px;
	color: #ffffff;
	height: 44px;
}
</style>
